import SwitchTheme from "@/comps/SwitchTheme";
import { pathElementMap } from "@/routes";
import { Breadcrumb, Divider, Layout, Link, Menu, Space } from '@arco-design/web-react';
import React, { useEffect, useState } from "react";
// import * as routerDom from "react-router-dom";
import { Link as RouterLink } from "react-router-dom";


const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;


const BreadcrumbItem = Breadcrumb.Item;


function RouteNav() {
  const loc = location;

  const [ele, setEle] = useState(<div></div>);
  const [currPath, setCurrPath] = useState("/");
  useEffect(() => {
    let hash = loc.hash ? loc.hash.substring(1) : null;
    if (hash && hash != loc.pathname) {
      setEle(pathElementMap[hash]);
      setCurrPath(hash);
    }
  }, []);

  function aClick(e, path, ele) {
    e.preventDefault();
    setEle(ele);
    setCurrPath(path);
    location.hash = path;
  }

  function routeList() {
    let entries = Object.entries(pathElementMap);
    let lis = entries.map((itemArr, i) => (
      <MenuItem key={itemArr[0]} title={itemArr[0]} onClick={(e) => aClick(e, itemArr[0], itemArr[1])}>
        {itemArr[0]}
      </MenuItem>
    ));

    return <>
      <Menu
        hasCollapseButton
        defaultOpenKeys={['0']}
        defaultSelectedKeys={['0_1']}
      >{lis}</Menu>
    </>
  }

  const { Sider, Header, Content } = Layout;

  return (
    <>
      <Layout className="h-full">
        <Sider resizeDirections={['right']} className={"h-full p-4"} style={{ maxWidth: 600, minWidth: 50, width: 320 }}>
          {routeList()}
        </Sider>
        <Content className={"h-full p-4"}>
          <Layout className={"h-full"}>
            <Header>
              <Space size={40}>
                <Breadcrumb separator={<span>・</span>}>
                  <BreadcrumbItem><RouterLink to={currPath} target="_blank">
                    <Link>独立访问</Link>
                  </RouterLink>
                  </BreadcrumbItem>
                  <BreadcrumbItem>
                    <SwitchTheme />
                  </BreadcrumbItem>
                </Breadcrumb>
              </Space>
              <Divider />
            </Header>
            <Content className={"h-full"}>
              {ele}
            </Content>
          </Layout>
        </Content>
      </Layout>
    </>
  );
}

export default RouteNav;
